import axios from "axios"
//引入进度条
import nProgress from "nprogress";
//引入进度条样式
import "nprogress/nprogress.css";

const request = axios.create({
  baseURL: process.env.VUE_APP_API,
  timeout: 10000,
})

//请求拦截器
request.interceptors.request.use(
  //拦截器上有两个回调函数
  (config) => { //这里的config就是axios请求的配置对象
    //发送请求时,让进度条开始
    nProgress.start()
    // 拦截器逻辑完成后,必须把config配置对象再返回出去,否则无法继续进行
    return config
  },
  //进入处理失败的回调函数有两种方法：1.请求拦截器可以设置多个，当上一次失败的就会进入当此的失败函数  2.给拦截器传入额外的参数，主动进入
  (error) => {
    //抛出错误时,让进度结束
    nProgress.done()
    //如果拦截器错误的请求下,我们要返回一个失败的promise实例
    //为什么要返回失败的promise实例????? 因为拦截器最终的返回结果是通过then方式返回的,then或catch只有再返回失败的promise实例的时候,then或catch才是失败状态,axios才能之后我们失败了
    return Promise.reject(error);
  }
)

//响应拦截器
request.interceptors.response.use(
  //response是请求回来的axios数据
  (response) => {
    //只要响应了就代表请求已经晚了,当进度条结束
    nProgress.done()
    if (response.data.code === 200) {
      return response.data.data
    } else {
      return Promise.reject(new Error(response.data.msg))

    }
  },
  (error) => {
    //抛出错误时,让进度结束
    nProgress.done()
    return Promise.reject(error)
  }
)
export default request